// 封装一个数据懒加载的hook方法 （新鲜与热门组件用）
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
export const useLazyData = (apiFn) => {
  // 被监听的DOM元素
  const target = ref(null)
  // 接口调用的结果
  const list = ref([])
  // 监听DOM元素进入可视区
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
    if (isIntersecting) {
      // console.log('该组件进入到了可视区')
      apiFn().then(ret => {
        list.value = ret.result
        // 获取到数据之后，停止继续监听
        stop()
      })
    }
  })
  return { list, target }
}
